<template>
  <a-card :bordered="false" class="card-area">
    <div :class="advanced ? 'search' : null">
      <div class="operator" v-if="operatorType !== 'view' && operatorType !== 'cancel'">
        <a-button type="primary" @click="add()">
          <a-icon type="plus" />
          <span>增加</span>
        </a-button>
      </div>
      <!-- 表格区域 -->
      <a-table
        ref="TableInfo"
        :columns="columns"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        :dataSource="dataSource"
        :pagination="pagination"
        :loading="loading"
        @change="pageChange"
        @showSizeChange="pageChange"
      >
        <template slot="operation" slot-scope="text, record, index"  v-if="operatorType !== 'view' && operatorType !== 'cancel'">
          <a-icon
            type="setting"
            theme="twoTone"
            twoToneColor="#4a9ff5"
            @click="edit(record,index)"
            title="修改"
          ></a-icon>
          <a-icon
            type="delete"
            theme="twoTone"
            twoToneColor="#4a9ff5"
            @click="del(index)"
            title="删除"
          ></a-icon>
        </template>
      </a-table>
    </div>
    <!-- 新增 -->
    <fee-table-add
      ref="feeTableAdd"
      @close="handleFeeTableAddClose"
      @success="handleFeeTableAddSuccess"
      :feeTableAddVisiable="feeTableAdd.visiable"
    ></fee-table-add>
    <!-- 修改 -->
    <fee-table-edit
      ref="feeTableEdit"
      @close="handleFeeTableEditClose"
      @success="handleFeeTableEditSuccess"
      :feeTableEditVisiable="feeTableEdit.visiable"
    >
    </fee-table-edit>
  </a-card>
</template>

<script>
import RangeDate from "../../../../../components/datetime/RangeDate";
import FeeTableAdd from "./FeeTableAdd";
import FeeTableEdit from "./FeeTableEdit";

export default {
  name: "FeeTable",
  components: { FeeTableAdd, FeeTableEdit, RangeDate },
  data() {
    return {
      advanced: false,
      operatorType: 'add',
      feeTableAdd: {
        visiable: false,
      },
      feeTableEdit: {
        visiable: false,
      },
      queryParams: {},
      filteredInfo: null,
      sortedInfo: null,
      paginationInfo: null,
      dataSource: [],
      selectedRowKeys: [],
      loading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
    };
  },
  computed: {
   columns() {
      return [
        {
          title: "分段开始值(元、不包含)",
          dataIndex: "pStartValue",
          width: 150,
        },
        {
          title: "分段结束值(元、包含)",
          dataIndex: "pEndValue",
          width: 150,
        },
        {
          title: "分段计算方式",
          dataIndex: "pCalType",
          width: 150,
          customRender:(text,row,index)=>{
            switch (text) {
              case "1":
                return "按比例";
              case "2":
                return "按固定金额";
              case "3":
                return "按比例+封顶值";
            }
          }
        },
        {
          title: "分段比率(‰)",
          dataIndex: "pFeeRate",
          width: 120,
        },
        {
          title: "分段比率封顶值(元)",
          dataIndex: "pFeeRateMax",
          width: 120,
        },
        {
          title: "分段固定值(元)",
          dataIndex: "pValue",
          width: 120,
        },
        {
          title: "操作",
          dataIndex: "operation",
          width: 90,
          scopedSlots: { customRender: "operation" },
        },
      ];
    },
  },

  methods: {
    add() {
      let pStartValue = "0";
      let pEndValue = "99999999999999.99";
      if(this.dataSource.length !== 0){
        pStartValue = this.dataSource[this.dataSource.length - 1].pEndValue;
      }
      if(pStartValue === "99999999999999.99"){
        this.$message.error("分段结束值已达到最大值，无法继续增加分段");
        return;
      }
      this.feeTableAdd.visiable = true;
      this.$refs.feeTableAdd.resetFields();
      this.$refs.feeTableAdd.setFormValues(pStartValue,pEndValue);
    },
    handleFeeTableAddClose() {
      this.feeTableAdd.visiable = false;
    },
    handleFeeTableAddSuccess(e) {
      e.pSeqNo = this.dataSource.length
      this.dataSource.push(e);
      this.feeTableAdd.visiable = false;
      this.$message.success("新增成功");
    },

    edit(record,index) {
      if(index !== 0){
        record.pStartValue = this.dataSource[index - 1].pEndValue;
      }
      this.$refs.feeTableEdit.setFormValues(record);
      this.feeTableEdit.visiable = true;
      this.feeTableEdit.index = (this.pagination.pageNum - 1) * this.pagination.pageSize + index;
    },

    del(index){
      this.dataSource.splice(index,1);
    },

    handleFeeTableEditClose() {
      this.feeTableEdit.visiable = false;
    },
    handleFeeTableEditSuccess(e) {
      this.dataSource[this.feeTableEdit.index] = e;
      this.feeTableEdit.visiable = false;
      this.$message.success("修改成功");
    },
    pageChange(e) {
      this.pagination.pageNum = e.current;
      this.pagination.pageSize = e.pageSize;
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../../static/less/Common";
</style>
